<template>
  <div class="info-container">
    <van-nav-bar title="我的资料" left-arrow @click-left="$router.push('/mine')" />

    <div class="main-box">
      <van-cell  @click="$router.push('/editInfo?type=avatar')" style="height: 55px" title="头像" is-link>
        <template #default>
          <img v-imgerror="userImg" :src="'http://hmmm.zllhyy.cn/' + userInfo.avatar" alt="">
        </template>
      </van-cell>
      <div class="main-center">
        <van-cell @click="$router.push('/editInfo?type=nickname')" title="昵称" is-link :value="userInfo.nickname" />
        <van-cell @click="$refs.gender.show = true" title="性别" is-link :value="gender" />
        <van-cell @click="$refs.area.show = true" title="地区" is-link :value="userInfo.area" />
        <van-cell @click="$router.push('/editInfo?type=intro')" title="个人简介" is-link :value="userInfo.intro" />
      </div>
      <van-button @click="logout" class="default" type="default">退出登录</van-button>
    </div>

    <user-gender ref="gender" />
    <user-area ref="area" />
  </div>
</template>

<script>
// import UserGender from './components/UserGender.vue'
// import UserArea from './components/UserArea.vue'
import { mapGetters } from 'vuex'
import { Dialog } from 'vant'

export default {
  components: { 
    // UserGender,
    // UserArea
  },
  name: 'info-container',
  data() {
    return {
      userImg: 'http://hmmm.zllhyy.cn/uploads/myphoto_f6d77c1cd8.png',
      gender: ''
    }
  },
  methods: {
    logout() {
      Dialog.confirm({
        title: '提示',
        message: '确认退出？',
      }).then(() => {
        this.$store.dispatch('user/logout')
        this.$router.push('/login')
      })
    }
  },
  async created() {
    if(this.userInfo.gender == 0) {
      this.gender = '未知'
    } else if (this.userInfo.gender == 1) {
      this.gender = '男孩子'
    } else {
      this.gender = '女孩子'
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  }
}
</script>

<style lang="less" scoped>
.info-container {
  background-color: #f9f9f9;
  height: 100vh;
  .main-box {
    padding: 15px;
    height: 20px;
    img {
      width: 35px;
      height: 35px;
      border-radius: 50%;
    }
  }
  .main-center {
    margin-top: 15px;
  }
  .default {
    width: 100%;
    color: #e80137; 
    margin-top: 15px;
  }
}
</style>
